<template>
	<view class="detail">
		<view class="detail-image">
			<image :src="dataArry[dataIndex][arryIndex].coverpath" ></image>

		</view>
		<view class="content">
			<view class="content-top">
				<view class="title">
					<text class="t1">{{dataArry[dataIndex][arryIndex].subject}}</text>
					<text class="t2">价格:{{dataArry[dataIndex][arryIndex].price}}</text>
				</view>
				<view class="decripe">
					生活，是一条河流
					
					不敢停下脚步
					
					不敢蹉跎时光
					
					一跃而起，摘来星辰
					
					镶嵌在我的无星无月的黑夜里
					
					我嗅到了，草木的清香
					
					我的天空，也要有星光
					
					不说，山高水远
					
					我只努力地，让自己的生活靠岸
				</view>
			</view>
			<view class="instruction">
				<text class="t3">使用说明</text>
				<text>一、涂指甲油之前要涂上指甲底油</text>
				<text>二、不涂会让美甲不堪一击</text>
				<text>三、短甲最好涂深色指甲油</text>
				<text>四、美甲颜色最好要保持协调</text>
				<text>五、不要小看修甲工具</text>
				<view class="btn" @click="recomd">
					立即预定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import * as mydata from '../../utils/data.js'
	export default {
		data() {
			return {
				dataIndex: '',
				arryIndex:'',
				dataArry:[]
			}
		},
		onLoad(option) {
			// 用来接收参数
			// 这个是第几个数组
			this.dataIndex = option.id
			this.arryIndex = option.index

		},
		methods: {
			recomd(){
				uni.navigateTo({
					url:`../reserve/reserve`
				})
			}

		},
		mounted() {
			this.dataArry = mydata.getIndexNavSectionData()
			
			console.log(this.dataArry)
			console.log(this.dataIndex)
			console.log(this.arryIndex)
		}
	}
</script>

<style>
	.detail {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.detail-image {
		width: 100%;
		height: 400rpx;
	}

	.detail-image image {
		width: 100%;
		height: 100%;

	}

	.content {
		width: 100%;
		height: 764rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		box-sizing: border-box;
	}

	.content-top {
		width: 100%;
		height: 50%;
		/* background-color: #4CD964; */
		margin-top: 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.content-top .title .t1 {
		font-size: 28rpx;
		font-weight: 600;
	}

	.content-top .title .t2 {
		font-size: 28rpx;
		font-weight: 600;
		color: #ef0000;
		margin-left: 40rpx;
	}

	.instruction {
		width: 100%;
		height: 50%;
		/* background-color: #007AFF; */
		padding-top: 20rpx;
	}

	.instruction .t3 {
		font-weight: 600;
		display: block;

	}

	.instruction text {
		display: block;
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.btn {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #e30000;
		margin-top: 10rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.decripe {
		color: #ccc;
		font-size: 28rpx;
		padding-top: 20rpx;

	}
</style>
